<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>我的交易</title>
    <link rel="stylesheet" href="css/yueke.css">
    <link rel="stylesheet" href="css/mobiscroll_640.css">
    <link rel="stylesheet" href="ubox/ubox.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/mobiscroll_640.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="ubox/ubox.js"></script>
    <script type="text/javascript" src="underscore/underscore-min.js"></script>
    <script type="text/javascript" src="js/list_more.js"></script>
    <script type="text/javascript" src="js/paging.js"></script>
</head>
<body class="background_grey">
    <div class="header">
        <div class="header_in">
            <div class="header_logo">
                <h1></h1>
                <img src="images/index_log.jpg" /> 
            </div>
            <div class="header_nav">
                <ul>
                    <li><a href="model_news_list.html">前沿资讯</a></li>
                    <li><a href="model_problem_list.html">互动问答</a></li>
                    <li><a href="model_personage_center.html">帮助中心</a></li>
                </ul>
            </div>
            <div class="header_info">
                <div class="header_info_find"><a href="model_person_index.html">寻找合作伙伴</a></div>
                <div class="header_greet">
                    enzo，您好
                </div>
                <div class="header_register display_none">
                    <a href="#">登录</a>|
                    <a href="#">注册</a>
                </div>
                <div class="header_exit">
                    <a href="#">我的项目</a>|
                    <a href="#">退出</a>
                </div>
                <div class="header_become display_none">
                    <a href="#">成为我们的专家</a>
                </div>
            </div>
            <div class="clear_both"></div>
        </div>
    </div>
    <div class="personage_wrap">
        <div class="personage_nav">
            <div class="personage_nav_title">任务管理</div>
            <ul class="personage_nav_list">
                <li class="item1">
                    <span></span>我的任务
                </li>
                <li class="item2 active">
                    <span></span>我的交易
                </li>
                <li class="item3">
                    <span></span>我的消息
                </li>
                <li class="item4">
                    <span></span>我的收支
                </li>
                <li class="item5">
                    <span></span>提现记录
                </li>
            </ul>
            <div class="personage_nav_title">账号安全</div>
            <ul class="personage_nav_list">
                <li class="item6">
                    <span></span>实名认证
                </li>
                <li class="item7">
                    <span></span>银行卡认证
                </li>
                <li class="item8">
                    <span></span>修改密码
                </li>
            </ul>
            <div class="personage_nav_title">个人资料</div>
            <ul class="personage_nav_list">
                <li class="item9">
                    <span></span>资料修改
                </li>
            </ul>
        </div>
        <div class="personage_main">
            <div class="company_introduce_title">
                <h2>我的交易</h2>
            </div>
            <div class="personage_deal_in">
                <div class="personage_deal_search">
                    <div class="personage_deal_ipt">
                        <span>起始时间：</span>
                        <input type="text"  id="dateStart"/>
                        <span>—</span>
                        <input type="text"  id="dateEnd" />
                        <i id="dataSearch">搜 索</i>
                    </div>
                    <div class="personage_deal_time">
                        <span>今天</span>
                        <span>最近一个月</span>
                        <span>最近三个月</span>
                    </div>
                </div>
                <div class="personage_deal_table">
                    <table id="deal_table"> 
                        <thead>
                            <tr>
                                <th class="row1">时间</th>
                                <th class="row2">名称/交易号</th>
                                <th class="row3">极客</th>
                                <th class="row4">悬赏金额</th>
                                <th class="row5">已付赏金</th>
                                <th class="row6">状态</th>
                                <th class="row7">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                            <tr>
                                <td class="row1">2016-05-23 21:09</td>
                                <td class="row2">材料交易 / #13</td>
                                <td class="row3">陈江韩</td>
                                <td class="row4">2000.00</td>
                                <td class="row5">1000.00</td>
                                <td class="row6">等待极客确认</td>
                                <td class="row7"><span>操作详情</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="personage_deal_page">
                    <div class="personage_deal_page_show">
                        <span>共 <span class="sum_page">5</span> 页</span>到第<input type="text" class="input_page"/>页 <i id="btnPage">确认</i>
                    </div>
                    <div class="personage_deal_page_num">
                        <!-- <span class="prev" id="prev">&lt;</span> -->
                        <div class="personage_deal_page_num_in" id="page_num">
                        </div>
                        <!-- <i>...</i> -->
                        <!-- <span class="next" id="next">&gt;</span> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="index_footer">
        <div class="index_footer_link">
            <a href="">新闻公告</a>|
            <a href="">关于我们</a>|
            <a href="">联系我们</a>|
            <a href="">用户协议</a>
        </div>
        <p class="index_footer_copy">Copyright©2016 yk-zb.com 粤科众包 版权所有 粤ICP备16027165号-1</p>
    </div>
    <script id="rowItem" type="text/template">
        <tr>
            <td class="row1"><#= time #></td>
            <td class="row2"><#= deal_name #></td>
            <td class="row3"><#= geek #></td>
            <td class="row4"><#= money #></td>
            <td class="row5"><#= already_money #></td>
            <td class="row6"><#= status #></td>
            <td class="row7"><span><#= operation #></span></td>
        </tr>
    </script>
</body>
</html>
    <script type="text/javascript">
    </script>
<script type="text/javascript">
    $(function() {
        /*隔行换色*/
        var nowNum = 1;
        var allNum = 5;
        function zebraList(){
            $(".personage_deal_table tr").each(function(index, el) {
                if(index % 2 == 0){
                    $(this).css({"background-color":"#f8fafb"});
                }else{
                    $(this).css({"background-color":"#fff"});
                }
            });
        }
        zebraList();
        function paging(nowNum,allNum){
            var obj = document.getElementById("page_num");
            page({
                obj : obj,
                nowNum : nowNum,
                allNum : allNum,
                callback : function (now,all){
                    /*$.ajax({
                        type: "get",
                        url: url,
                        rnd: rnd,
                        dataType: "json",
                        success: function(result) {
                                if(result.code == 1){
                                      var list = result.data.order_list;
                                      //每次都返回总页数
                                      pages = result.data.page_size;
                                      console.log(result.data);
                                      for(var i = 0; i < list.length; i++){
                                            var t = _.template($("#rowItem").text());
                                            var htmlTxt = t(list[i]);
                                            console.log(t,htmlTxt)
                                            $('#deal_table').append(htmlTxt);
                                      }
                                      if (page >= pages){
                                              $("#moreBt").html('没有更多');
                                      }
                                }else{
                                          UBox.show('加载失败', -1);
                                }
                        }
                    });*/
                    $('#deal_table tbody').html('');
                    var attr = [
                        {
                        time : '2016-05-23 21:09',
                        deal_name : '材料交易 / #13',
                        geek : '11',
                        money : '2000',
                        already_money : '1000',
                        status : '等待极客确认' ,
                        operation : '操作详情'
                    },
                    {
                        time : '2016-05-23 21:09',
                        deal_name : '材料交易 / #13',
                        geek : '22',
                        money : '2000',
                        already_money : '1000',
                        status : '等待极客确认' ,
                        operation : '操作详情'
                    },
                    {
                        time : '2016-05-23 21:09',
                        deal_name : '材料交易 / #13',
                        geek : '33',
                        money : '2000',
                        already_money : '1000',
                        status : '等待极客确认' ,
                        operation : '操作详情'
                    },
                    {
                        time : '2016-05-23 21:09',
                        deal_name : '材料交易 / #13',
                        geek : '44',
                        money : '2000',
                        already_money : '1000',
                        status : '等待极客确认' ,
                        operation : '操作详情'
                    },
                    {
                        time : '2016-05-23 21:09',
                        deal_name : '材料交易 / #13',
                        geek : '55',
                        money : '2000',
                        already_money : '1000',
                        status : '等待极客确认' ,
                        operation : '操作详情'
                    }
                    ];
                    for(var i = 0; i< 5; i++){
                        var t = _.template($("#rowItem").text());
                        var htmlTxt = t(attr[now-1]);
                        console.log(t,htmlTxt)
                        $('#deal_table tbody').append(htmlTxt);
                    }
                    zebraList();
                    console.log("当前页"+now+":总页数"+all);
                }
            });
        };
        paging(nowNum,allNum);
        /*拼装*/
        /*(function fnAssembly(){
            var json = {
                time : '2016-05-23 21:09',
                deal_name : '材料交易 / #13',
                geek : '陈江韩',
                money : '2000',
                already_money : '1000',
                status : '等待极客确认' ,
                operation : '操作详情'
            }
            console.log(json)
            var t = _.template($("#rowItem").text());
            var htmlTxt = t(json);
            console.log(t,htmlTxt)
            $('#deal_table').append(htmlTxt);
        })();*/
        /*左边导航*/
        (function fnTab(){
            for( var i = 0; i< $('.personage_nav li').length; i++){
                if($('.personage_nav li').eq(i).hasClass('active')){
                    console.log(i);
                    var index = i;
                }
            }

            $('.personage_nav li').hover(function() {
                $('.personage_nav li').eq(index).addClass('active');
                $(this).addClass('active');
            }, function() {
                $(this).removeClass('active');
                $('.personage_nav li').eq(index).addClass('active');
            });
                
        })();
        
      /**
       * 初始化日历选择控件
       */
      (function fnTime(){
          function initDatePicker(obj){
                var curr = new Date();
                var startDate = new Date();
                startDate.setDate(startDate.getDate() + 1);
                var _y = curr.getFullYear();
                var _m = curr.getMonth() + 1;
                var _d = curr.getDate() + 1;
                var endDate = new Date(_y + 10,11, 31);
                _m = _m < 10 ? '0' + _m : _m;
                _d = _d < 10 ? '0' + _d : _d;
                var s_date = _y + '-' + _m + '-' + _d;
                // $('#dateStart').val(s_date);
                obj.scroller('destroy').scroller({
                            preset : 'date',
                            theme: 'android-ics light',   //皮肤样式  
                            mode : "scroller",//日期选择模式  
                            display : "modal",//显示方式   
                            yearText : "年",
                            monthText : "月",
                            dayText : "日",
                            setText : '确定',
                            cancelText : '取消',
                            dateOrder: 'yymmdd',
                            dateFormat : 'yyyy-mm-dd',
                            minDate: startDate,
                            maxDate: endDate  //结束年份
                });
          }

          initDatePicker($('#dateStart'));
          initDatePicker($('#dateEnd'));
      })();
      /*点击搜索*/
      $('#dataSearch').click(function(event) {
          var dataStart = $('#dateStart').val().replaceAll('-','');
          var dataEnd = $('#dateEnd').val().replaceAll('-','');
          console.log(dataStart,dataEnd);
      });
      /*页数的确认按钮*/
      $('#btnPage').click(function(event) {
          var value = $('.input_page').val();
          console.log(value);
            nowNum = value;
          paging(nowNum,allNum);
      });
      /*向后翻页*/
      /*$('#next').click(function(event) {
            nowNum++;
            if(nowNum >= allNum){
                nowNum = allNum;
            }
            paging(nowNum)
      });*/
      /*向前翻页*/
      /*$('#prev').click(function(event) {
            nowNum--;
            if(nowNum <= 1){
                nowNum = 1;
            }
            paging(nowNum)
      });*/
      /*第几页的输入框*/
      $('.input_page').keyup(function(event) {
            var reg = /^[0-9]+$/ ;
            var str = $('.input_page').val();
            if(str.length != 0){
                if(!reg.test(str)){
                    UBox.show("输入数字", -1);
                    $('.input_page').val('');
                    return false;
                }else{
                    var strNum = parseInt(str);
                    var sumPage = parseInt($('.sum_page').html());
                    if(strNum > allNum){
                        UBox.show("超出页数范围", -1);
                        $('.input_page').val(sumPage);
                        return false;
                    }else if(strNum < 1){
                        UBox.show("超出页数范围", -1);
                        $('.input_page').val('1');
                        return false;
                    }
                }
            }
      });
      /*第几页的输入框*/
      $('.input_page').change(function(event) {
            var reg = /^[0-9]+$/ ;
            var str = $('.input_page').val();
            if(!reg.test(str)){
                UBox.show("输入数字", -1);
                return false;
                $('.input_page').val('');
            }else{
                var strNum = parseInt(str);
                var sumPage = parseInt($('.sum_page').html());
                if(strNum > allNum){
                    UBox.show("超出页数范围", -1);
                    $('.input_page').val(sumPage);
                    return false;
                }else if(strNum < 1){
                    UBox.show("超出页数范围", -1);
                    $('.input_page').val('1');
                    return false;
                }
            }
      });
    });
</script>